真的好想離開 Vue 3 新手村 - Day 3: 細看 Vue + Vite 專案資料夾結構 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 3

Modern Web

真的好想離開 Vue 3 新手村 feat. CompositionAPI系列第 3 篇

真的好想離開 Vue 3 新手村 - Day 3: 細看 Vue + Vite 專案資料夾結構

14th鐵人賽 vue.js vite vue vue新手村

安揪拉

2022-09-18 14:21:32

9897 瀏覽

分享至

誰適合看這篇

已經初步了解 npm、package.json、package-lock.json、node_modules
建立 Vue 專案後，沒有仔細看過整個資料夾內容，不了解各個資料夾的意義
不知道為什麼在 Vue 專案寫路徑時，可以用 @ 取代 ./src

Outline

認識專案資料夾結構
- vite.config.js
- index.html
- 📂 src
- 📂 public
- 專案設定與套件相關檔案

Vite 資料夾結構

使用指令：npm init vue@latest ｜ npm init vue@3
加點工具：Vue Router、Pinia、ESLint 和 Prettier

透過 npm init vue@latest 後，按照內建提示進行，在選擇週邊工具時，額外選擇了 Vue Router、Pinia、ESLint 和 Prettier，最後建置出來的 Vue 專案資料夾如下：

hello-vite/
├── index.html
├── node_modules
├── package.json
├── package-lock.json
├── public
│   └── favicon.ico
├── README.md
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── base.css
│   │   ├── logo.svg
│   │   └── main.css
│   ├── components
│   │   ├── HelloWorld.vue
│   │   ├── icons (略 - 放所有 icon 的 svg 檔)
│   │   ├── TheWelcome.vue
│   │   └── WelcomeItem.vue

│   ├── main.js
│   ├── router
│   │   └── index.js
│   ├── stores
│   │   └── counter.js
│   └── views
│       ├── AboutView.vue
│       └── HomeView.vue
└── vite.config.js

1. `vite.config.js`

Vite 的設定檔，在每次執行 vite 時 (如: npm run dev)，Vite 會自動解析專案根目錄內的 vite.config.js，根據設定來打包專案
原始設定如下：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

可以看到已經預先寫好路徑別名，所以在開發專案時，引用檔案才可以用 '@' 取代 './src'。用 vite 指令進行打包時，會進行預處理。
可以在這裡對打包、本地啟動伺服器等，做更多設定。

2. `index.html`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

<body> 裡面已經有一個 div，id 為 app
<script> 指向 📂 src 下的 main.js

3. 📂 src

主要的檔案和程式碼都會放在這裡。

App.vue
- 通常只會有一個，作為整個網頁的根元件
- .vue 檔是 Vue 特有的檔案類型
main.js
是專案的程式進入點，剛建立完成的內容如下：
```
import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'

import './assets/main.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')
```
- 內容快速解析：
  1. 引用根元件 App.vue，傳入 createApp() 中創建一個 Vue 實體，透過 .mount(#app) 將內容渲染到 HTML 上的 div#app 內
  2. 通常會在這裡引入其他插件、工具，如：Pinia 和 Vue Router
資料夾說明
- 📂 assets：放靜態資源，如：圖片、CSS
- 📂 components：放元件檔
- 其他週邊工具相關資料夾
  - 📂 stores：與 Pinia 狀態管理器有關
  - 📂 router：與 Vue Router 路由管理有關
  - 📂 views：放路由元件(通常為畫面/頁面)

4. 📂 public

裡面的東西不會經過編譯和打包，所以放在 📂 public 內的東西不能被 Javascript 引用
通常會放置 ( 不被 JavaScript ) 引用的靜態資源，例如：網頁標題欄 icon，即資料夾中的 favicon.ico
在整份專案進行打包的時候，📂裡面的檔案會直接被複製一份，放在根目錄內，所以要引用 📂 public 內的資源時，要使用根目錄絕對路徑，舉例：要拿 public/favicon.ico 應寫成 /favicon.ico

5. 專案設定與套件相關

- `package.json` & `package-lock.json`

是整個專案的設定檔
會紀錄所使用到的套件與版本
package.json 裡面會有 3 個預先寫好的 script 腳本，用來執行 Vite 相關指令 (指令作用後面會提到)

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview --port 4173"
},

- `.gitignore`:

git 版本控制下，想要排除的檔案，如： 📂 node_modules 等等
建立專案時已經將 node_modules 寫在裡面

- 📂 node_modules

npm 根據 package.json 安裝的所有套件(及套件相依套件)都會在這個資料夾下
檔案體積大，通常會被排除在 git 版控外，共同開發者只要執行 npm install 就可以根據 package.json 進行安裝所需套件
專案依賴的套件則透過打包工具進行打包

總結

vite.config.js 是 vite 的設定檔，可以用來客製化打包的需求；以官網建立的 Vue 專案為例，對路徑設定了別名，所以在專案路徑可以用 ＠ 取代 ./src
📂 src 資料夾是主要程式碼的存放位置，裡面會有
- main.js 程式碼進入點，會在這裡創建 Vue 實例，並掛載到 DOM 上
- App.vue 網頁的根元件
📂 public 資料夾不會經過編譯和打包，會直接複製一份到根目錄
- 不能放會被 Javascript 引入的東西
- 取資料夾內的檔案路徑為根目錄絕對路徑